<template>
  <div style="width: 100%; min-height: 200px; height: 100%">
    <van-grid :gutter="5" :column-num="3">
      <van-grid-item icon="success" text="开启" @click="doReq('on')" />
      <van-grid-item
        icon="arrow-up"
        text="升温"
        @click="doReq('addTem')"
      />
      <van-grid-item icon="hot-o" text="暖风" @click="doReq('m2')" />
      <van-grid-item icon="cross" text="关闭" @click="doReq('off')" />
      <van-grid-item
        icon="arrow-down"
        text="降温"
        @click="doReq('subTem')"
      />
      <van-grid-item icon="contact" text="冷风" @click="doReq('m1')" />
    </van-grid>
  </div>
  <div style="margin: 20px 30px 30px">
    <van-slider v-model="delayMinutes" active-color="#ee0a24">
      <template #button>
        <div class="delay-button">{{ delayMinutes }}</div>
      </template>
    </van-slider>
  </div>
</template>
<script>
export default {
  name: "MideaBtn",
  props: {
    // id: String,
    driver: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      delayMinutes: 0,
    };
  },
  watch: {
    rows: {
      handler(newVal) {
        this.lineChartOption.dataset.source = newVal;
        this.lineChart.setOption(this.lineChartOption);
      },
      deep: true,
    },
  },
  methods: {
    doReq(mes) {
      console.log(this.delayMinutes);
      if (this.delayMinutes === 0) {
        this.baseMethod(mes);
      } else {
        this.delayMethod(mes);
      }
    },
    baseMethod(mes) {
      const _this = this;
      this.axios
        .get(
          // `http://lurenpeng.cn:8999/push/midea/sync?clientId=${this.driver.clientId}&msg=${mes}`
          `./api/push/midea/sync?clientId=${this.driver.clientId}&msg=${mes}`, {
          headers: {
            token: localStorage.getItem("token"),
          },
        }
        )
        .then(function (response) {
          console.log(response);
          const { code, msg, data } = response.data;
          if (code === 0) {
            _this.$notify({
              type: "success",
              message: `操作[ ${_this.driver.clientId} ]成功,状态:${data[0].msg.power} ,温度:${data[0].msg.tem} ,风速:${data[0].msg.fan}`,
            });
          } else {
            _this.$notify({
              type: "danger",
              message: `操作[ ${_this.driver.clientId} ]失败`,
            });
          }
        })
        .catch(function (error) {
          _this.driver.loading = false;
          console.error(error);
        });
    },
    delayMethod(mes) {
      const seconds = this.delayMinutes * 60;
      const _this = this;
      this.axios
        .get(
          // `http://lurenpeng.cn:8999/push/midea/delay?clientId=${this.driver.clientId}&msg=${mes}&second=${seconds}`
          `./api/push/midea/delay?clientId=${this.driver.clientId}&msg=${mes}&second=${seconds}`, {
          headers: {
            token: localStorage.getItem("token"),
          },
        }
        )
        .then(function (response) {
          console.log(response);
          const { code, msg } = response.data;
          if (code === 0) {
            _this.$notify({
              type: "success",
              message: `延迟[ ${_this.delayMinutes} ]分钟操作[ ${_this.driver.clientId} ]成功`,
            });
          } else {
            _this.$notify({
              type: "danger",
              message: `操作[ ${_this.driver.clientId} ]失败`,
            });
          }
        })
        .catch(function (error) {
          _this.driver.loading = false;
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
.delay-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}
</style>